<script lang="ts" setup>
import BackgroundVideo from '@/component/Background/BackgroundVideo.vue'
import ShowResources from '@/component/Upload/ShowResources.vue'
import { useAccountStore } from '@/config/store/UseAccountStore.ts'
import { useBackgroundSettingStore } from '@/config/store/UseBackgroundSettingStore.ts'
import { storeToRefs } from 'pinia'
import { computed, type CSSProperties } from 'vue'

const accountStore = useAccountStore()
const { currentSetting, currentSpecialEffects } = storeToRefs(useBackgroundSettingStore())

const overlayStyle = computed<CSSProperties>(() => {
    const color = currentSetting.value.mask.color
    const opacity = currentSetting.value.mask.opacity

    if (!currentSetting.value.mask.enable) {
        return {}
    }

    const rgb = new RegExp('rgb(a)?\\((?<r>\\d+),\\s?(?<g>\\d+),\\s?(?<b>\\d+)(,\\s?\\S+)?\\)')
    if (rgb.test(color)) {
        const exec = rgb.exec(color)
        const { r, g, b } = exec?.groups ?? {}
        return {
            backgroundColor: `rgba(${ r },${ g }, ${ b }, ${ opacity })`,
        }
    }
    console.debug('[Background] 无法识别的颜色格式: ', color)

    return {}
})

</script>

<template>
<div :style="`--background-blur: ${ currentSpecialEffects.blur }px`" class="background-wrapper absolute-position">

    <template v-if="accountStore.isLogin">

        <template v-if="currentSetting.type === 'image'">
            <ShowResources :uri="currentSetting.image?.uri ?? ''">
                <template #default="{url, isLoading}">
                    <div
                            v-if="!isLoading"
                            :style="`background-image: url('${url}')`"
                            class="background-image"
                    />
                </template>
            </ShowResources>
        </template>
        <BackgroundVideo v-else-if="currentSetting.type === 'video'" />

        <div
                :style="overlayStyle"
                class="overlay absolute-position"
        />

    </template>

</div>
</template>

<style lang="scss" scoped>
.absolute-position {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}

.background-wrapper {
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.overlay {
    isolation: isolate;
    z-index: 1000;
    backdrop-filter: blur(var(--background-blur, 0));
}

.background-image {
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-clip: border-box;
    background-size: cover;
}
</style>
